<template>
    <div class="message_tabs">
        <div style="display: flex; align-items: center">
            <div class="tab_item" :class="item.value == activetab ? 'active_tab_item' : ''"
                @click="changeactivetab(item.value)" v-for="item in tabs" :key="item.value">
                {{ item.label }}
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    tabs: Array,
    activetab: String,
})
const emits = defineEmits()

const changeactivetab = value => {
    emits('change', value)
}

</script>

<style lang="scss" scoped>
.message_tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.tab_item {
    height: 28px;
    line-height: 28px;
    margin-right: 24px;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #666;
    border-bottom: 2px solid #fff;
    cursor: pointer;
}

.active_tab_item {
    font-family: AlibabaPuHuiTi_2_85_;
    font-size: 16px;
    font-weight: bold;
    color: var(--pcmain-color);
    border-bottom: 2px solid var(--pcmain-color);
}

.all_read {
    // width: 100px;
    padding: 0 12PX;
    height: 28px;
    background-color: var(--pcmain-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_55_;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}
</style>